<template>
  <div class="bill-detail-container">
    <el-page-header @back="goBack" content="账单详情" />
    <el-card class="box-card">
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="6" animated />
      </div>
      <div v-if="!loading && bill">
        <el-descriptions title="账单信息" :column="2" border>
          <el-descriptions-item label="账单编号">{{ bill.billNumber }}</el-descriptions-item>
          <el-descriptions-item label="账单类型">{{ bill.billType }}</el-descriptions-item>
          <el-descriptions-item label="支付状态">
            <el-tag :type="getStatusType(bill.paymentStatus)">{{ bill.paymentStatus }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="账单周期">{{ bill.billPeriod || '无' }}</el-descriptions-item>
          <el-descriptions-item label="账单金额">{{ bill.amount }} 元</el-descriptions-item>
          <el-descriptions-item label="应付日期">{{ bill.dueDate }}</el-descriptions-item>
          <el-descriptions-item label="实际支付日期">{{ bill.paymentDate || '未支付' }}</el-descriptions-item>
        </el-descriptions>

        <el-divider />

        <el-descriptions title="关联信息" :column="2" border>
          <el-descriptions-item label="支付方">{{ bill.payerName }}</el-descriptions-item>
          <el-descriptions-item label="关联合同">
             <el-link v-if="bill.contractId" type="primary" @click="viewContract">{{ bill.contractNumber }}</el-link>
             <span v-else>无</span>
          </el-descriptions-item>
        </el-descriptions>

        <el-divider />

        <el-descriptions title="备注信息" :column="1" border>
            <el-descriptions-item label="备注">{{ bill.remarks || '无' }}</el-descriptions-item>
        </el-descriptions>

      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getBillDetail } from '@/api/finance'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const bill = ref(null)
const loading = ref(true)

const billId = route.params.id

const fetchBillDetail = async () => {
  try {
    loading.value = true
    const res = await getBillDetail(billId)
    if (res.data.code === 200) {
        bill.value = res.data.data
    } else {
        ElMessage.error(res.data.message || '获取账单详情失败')
    }
  } catch (error) {
    ElMessage.error('获取账单详情失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

const getStatusType = (status) => {
  switch (status) {
    case '已支付': return 'success';
    case '未支付': return 'warning';
    case '逾期': return 'danger';
    case '已关闭': 
    case '部分支付':
      return 'info';
    default: return '';
  }
}

const goBack = () => {
  router.back()
}

const viewContract = () => {
    if(bill.value && bill.value.contractId) {
        router.push({ name: 'ContractDetail', params: { id: bill.value.contractId } })
    }
}

onMounted(() => {
  fetchBillDetail()
})
</script>

<style scoped>
.bill-detail-container {
  padding: 20px;
}
.box-card {
  margin-top: 20px;
}
.loading-container {
    padding: 20px;
}
</style> 